<template>
  <view class="myuserInfo">
    <!-- 用户头像与昵称 -->
    <view class="header">
      <image class="myimg" :src="userInfo.avatarUrl" mode=""></image>
      <text class="mytxt">{{ userInfo.nickName }}</text>
    </view>
    <view class="box">
      <!-- 渲染第一个区域 -->
      <view class="one">
        <view class="item">
          <view class="num">8</view>
          <view class="word">收藏的店铺</view>
        </view>
        <view class="item">
          <view class="num">14</view>
          <view class="word">收藏的商品</view>
        </view>
        <view class="item">
          <view class="num">18</view>
          <view class="word">关注的商品</view>
        </view>
        <view class="item">
          <view class="num">84</view>
          <view class="word">足迹</view>
        </view>
      </view>
      <!-- 渲染第二个区域 -->
      <view class="two">
        <view class="title">我的订单</view>
        <view class="towitems">
          <view class="item">
            <image class="myimg" src="../../static/my-icons/icon1.png" mode=""></image>
            <text class="mytxt">待付款</text>
          </view>
          <view class="item">
            <image class="myimg" src="../../static/my-icons/icon2.png" mode=""></image>
            <text class="mytxt">待收货</text>
          </view>
          <view class="item">
            <image class="myimg" src="../../static/my-icons/icon3.png" mode=""></image>
            <text class="mytxt">退款/退货</text>
          </view>
          <view class="item">
            <image class="myimg" src="../../static/my-icons/icon4.png" mode=""></image>
            <text class="mytxt">全部订单</text>
          </view>
        </view>
      </view>
      <!-- 渲染第三个区域 -->
      <view class="three">
        <view class="item">
          <text>收货地址</text>
          <uni-icons type="right" size="16"></uni-icons>
        </view>
        <view class="item">
          <text>联系客服</text>
          <uni-icons type="right" size="16"></uni-icons>
        </view>
        <view class="item" @click="logout">
          <text>退出登录</text>
          <uni-icons type="right" size="16"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    name: "myuserinfo",
    computed: {
      ...mapState('user', ['userInfo'])
    },
    data() {
      return {

      };
    },
    methods: {
      ...mapMutations('user', ['setUserInfo', 'setToken', 'setAddress']),
      // 退出登录
      async logout() {
        // 打开一个确认框
        const [err, res] = await uni.showModal({
          title: '提示',
          content: '您确定要退出吗？'
        })
        // 判断
        if (err) return uni.$showMsg('出错了')
        if (res.errMsg !== "showModal:ok") return uni.$showMsg('出错了！！')
        // 退出登录
        // 判断点击的是否是确定
        if (!res.confirm) return uni.showToast({
          title: '取消退出'
        })
        // 清除用户信息
        this.setUserInfo({})
        // 清除 token
        this.setToken('')
        // 清除地址
        this.setAddress({})
        // 提示退出成功
        uni.showToast({
          title: '退出登录成功',
          icon: 'success'
        })
      }
    }
  }
</script>

<style lang="scss">
  .myuserInfo {
    height: 100%;
    background-color: #f4f4f4;

    .header {
      background-color: #c00000;
      height: 400rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .myimg {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 2px solid #fff;
      }

      .mytxt {
        color: #fff;
        font-size: 14px;
        margin-top: 20px;
      }
    }

    .box {
      padding: 0 10px;

      .one {
        background-color: #fff;
        display: flex;
        align-items: center;
        border-radius: 4px;
        transform: translateY(-10px);
        // margin-top: -10px;

        .item {
          flex: 1;
          font-size: 14px;
          text-align: center;
          padding: 8px 0;

          .num {}

          .word {}
        }
      }

      .two {
        // margin-top: 10px;
        background-color: #fff;

        .title {
          line-height: 50px;
          border-bottom: 1px solid #ccc;
          padding-left: 10px;
        }

        .towitems {
          display: flex;

          .item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100px;

            .myimg {
              width: 40px;
              height: 40px;
            }

            .mytxt {
              font-size: 14px;
            }
          }
        }
      }

      .three {
        background-color: #fff;
        margin-top: 10px;

        .item {
          display: flex;
          justify-content: space-between;
          padding: 10px;
        }
      }
    }
  }
</style>
